

import './time-hand.less';
import {getNowFormatDate,getWeekDate} from '@/utils/time'
import { useState } from "react";

const TimeWord:React.FC<React.HTMLProps<Element>> = (props) => {
    // props.type style1 世界时间图标类型 style2世界时间列表
  const [minutes, setminutes] = useState(getNowFormatDate('mm'));
  const [hour, sethour] = useState(getNowFormatDate('hh'));
  const [sec, setsec] = useState(getNowFormatDate('ss'));
    setInterval(() => {
        setminutes(getNowFormatDate('mm'))
        sethour(getNowFormatDate('hh'))
        setsec(getNowFormatDate('ss'))
    },1000)
    return (
       <div>
            {
                props.type === 'style1' && 
                <div className="time_hand_style1">
                    <div className="time_hand_style1_watch">
                            <div className="hour" style={{'transform':`rotate(${(+hour + (+minutes + +sec/60) / 60) * 30 }deg)`}}></div>
                            <div className="min" style={{'transform':`rotate(${(+minutes + +sec/60) * 6}deg)`}}></div>
                            <div className="sec" style={{'transform':`rotate(${sec * 6 + 180}deg)`}}></div>
                            <div className="center" ></div>
                    </div>
                    <p>{getNowFormatDate('yy')}/{getNowFormatDate('mo')}/{getNowFormatDate('dd')}  <i>{getWeekDate()}</i></p>
                </div>
            }
            {
                props.type === 'style2' && 
                <div className="time_hand_style2">
                <div className="time_hand_style2_watch">
                        <div className="hour" style={{'transform':`rotate(${(+hour + (+minutes + +sec/60) / 60) * 30 }deg)`}}></div>
                        <div className="min" style={{'transform':`rotate(${(+minutes + +sec/60) * 6}deg)`}}></div>
                        <div className="sec" style={{'transform':`rotate(${sec * 6  + 180}deg)`}}></div>
                        <div className="center" ></div>
                </div>
                <p>{getNowFormatDate('yy')}/{getNowFormatDate('mo')}/{getNowFormatDate('dd')}  <i>{getWeekDate()}</i></p>
            </div>
            }
       </div>
            
    )
}
export default TimeWord